<template>
	<view class="pages">
		<view class="backg"></view>
		<view style="position: relative;top: -60rpx;padding: 0 30rpx;">
			<view class="card">
				<u--text text="排行榜" lineHeight="50" size="20" color="#fff" align="center"></u--text>
				<u-row customStyle="bottom: 0">
					<u-col span="3.5">
						<view class="demo-layout bg-purple">
							<view class="demo-layout_item">
								<u--image src="../../../static/tidings/2.png" width="30px" height="30px"></u--image>
								<u-avatar :src="dataTow.avatar"></u-avatar>
								<u--text :text="dataTow.brokerName" align="center"></u--text>
							</view>
							<u--text :text="dataTow.turnover +'单'" align="center" lineHeight="30"
								color="#dd4c37"></u--text>
						</view>
					</u-col>
					<u-col span="3.5">
						<view class="demo-layout bg-purple-light">
							<view class="demo-layout_item">
								<u--image src="../../../static/tidings/1.png" width="32px" height="32px"></u--image>
								<u-avatar :src="dataOne.avatar"></u-avatar>
								<u--text :text="dataOne.brokerName" align="center"></u--text>
							</view>
							<u--text :text="dataOne.turnover +'单'" align="center" lineHeight="30"
								color="#dd4c37"></u--text>
						</view>
					</u-col>
					<u-col span="3.5">
						<view class="demo-layout bg-purple">
							<view class="demo-layout_item">
								<u--image src="../../../static/tidings/3.png" width="30px" height="30px"></u--image>
								<u-avatar :src="dataThree.avatar"></u-avatar>
								<u--text :text="dataThree.brokerName" align="center"></u--text>
							</view>
							<u--text :text="dataThree.turnover +'单'" align="center" lineHeight="30"
								color="#dd4c37"></u--text>
						</view>
					</u-col>

				</u-row>
			</view>
			<view>
						<u-list  :height="370" @scrolltolower="lower">
							<u-list-item v-for="(item,index) in indexList" :key="index" class="list_item" >
								<u-cell>
									<u-avatar slot="icon" size="44" :src="item.avatar"
										customStyle="margin: -3px 5px -3px 0"></u-avatar>
									<view slot="title" class="u-slot-title">
										<view style="display: flex;">
											<u--text type="info" :text="item.createTime" size="12"></u--text>
											<u--text :text="'历史战绩:'+ item.turnover +'单'" align="right"
												color="#dd4c37"></u--text>
										</view>
										<view style="line-height: 40rpx;">
											恭喜【{{item.brokerName}}】签单成功，收获【{{item.achievMoney}}】业绩！租客的好帮手，同事的好榜样！</view>
									</view>
								</u-cell>
							</u-list-item>
							<u-loadmore :status="status" color="#ffffff"/>
						</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodNews,
		getTopThree
	} from '@/api/tidings/index.js'
	export default {
		data() {
			return {
				dataOne: {},
				dataTow: {},
				dataThree: {},
				indexList: [],
				status: 'loading',
				num: 1
			}
		},
		onLoad() {
			this.goodNewsList()
			this.topThree()
		},
		methods: {
			lower(){
					if(this.status == 'nomore')return 
					this.num += 1;
					this.goodNewsList()
			},
			async goodNewsList() {
				const res = await getGoodNews(this.num)
				// console.log(res);
				if(this.indexList.length == res.data.total) return this.status = 'nomore';
				this.indexList.push(...res.data.rows)
				console.log(this.indexList);
			},
			async topThree() {
				const res = await getTopThree()
				const sortArr = res.data.data.sort((a, b) => {
					if (a.turnover > b.turnover) {
						return -1
					} else {
						return 1
					}
				})
				this.dataOne = sortArr[0]
				this.dataTow = sortArr[1]
				this.dataThree = sortArr[2]

			}
		}
	}
</script>

<style lang="scss">
	.pages {
		background-color: #dd4c37;
		width: 100%;
		height: 100%;
		position: absolute;
		box-sizing: border-box;

		.backg {
			width: 100%;
			height: 500rpx;
			background: url("../../../static/tidings/backg.png");
			background-size: cover;
			background-repeat: no-repeat;
		}

		.card {
			padding: 30rpx;
			background: linear-gradient(#fdcc57, #fde9aa);
			border-radius: 20rpx 20rpx 0 0;

			.demo-layout {
				padding-top: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				float: left;
				box-shadow: 0 0 10px #dadada;
			}

			.demo-layout_item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}

			.bg-purple {
				height: 250rpx;
				width: 205rpx;
			}

			.bg-purple-light {
				height: 270rpx;
				width: 220rpx;
				z-index: 10;
			}
		}
		.scroll-Y{
			height: 620rpx;
		}
		.list_item {
			background-color: #fff;
		}
	}
</style>